<style scoped lang="scss">

  $bg-color:#f1f1f1;

  $width:1200px;

  .outer{
    width:100%;
    height: 100%;
    float: left;
    display: block;
  }

  .container{
    width:$width;
    height: 100%;
    background:$bg-color;
    display: block;
    clear: both;
    margin: 30px auto;
  }

  .component-group{
    width:370px;
    height: auto;
    float: left;
    display: block;
  }

    .clear{
      clear: both;
    }


</style>

<template>
  <div class="outer">
    <banner :project-name="project.project_name" :create-time="project.created_at | toDateTime"
     :build-organization="project.construction_organeation" :project-id="project.id"></banner>
    <div class="container" >
      <div class="component-group">
        <project-progress></project-progress>
        <base-info :info="info"></base-info>
      </div>
      <project-operation-panel :list="list"></project-operation-panel>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>

  import  ProjectProgress from "./progress/Index";

  import  BaseInfo from  "./info/Index";

  import ProjectOperationPanel from "./operate/Index";

  import Banner from "./banner/Index";

  import { mapState} from 'vuex';

  import { PROJECT_STATUS } from '@/conf/options';

  import  _ from "lodash";

  export default {
    components: {
      ProjectProgress,
      BaseInfo,
      ProjectOperationPanel,
      Banner
    },
    computed:mapState({
      user:state=>state.user.userData
    }),
    name:"ViewProjectDetail",
    data(){
        return {
          pId:-1,
          list:[],
          project:{
            project_name:"",
            created_at:new Date(),
            construction_organeation:"",
            id:""
          },
          info:{
            createTime:new Date(),
            sectionName:"",
            status:"",
            buildOrganization:"",
            responsibility:"",
            owner:"",
            auditManager:""
          }
        };
    },
    filters:{
      toDateTime(input){

        var tempDate=new Date(input);

        return tempDate.toLocaleString().split(' ')[0];
      }
    },
    created () {

      this.pId = this.$route.params.pId;

      this.$store.dispatch('getSingeProject',{
        'pId':this.pId,
        'token':this.user.token
      }).then(res => {
        /**
         * 拷贝project的内容
         */
        for (var key in res.data){

          if (this.project.hasOwnProperty(key)){

            this.project[key]=res.data[key];

          }
        }

        this.info.createTime=res.data.created_at;

        this.info.sectionName=res.data.sction_name;

        this.info.buildOrganization=res.data.construction_organeation;

        this.info.responsibility=res.data.project_manager;

        this.info.owner=res.data.project_manager;

        this.info.owner=res.data.apply_user;

        this.info.auditManager= res.data.jianli_name;

        for(var i=0;i<PROJECT_STATUS.length;i++){

          for (var j=0;j<PROJECT_STATUS[i].range.length;j++){

            if (res.data.status==PROJECT_STATUS[i].range[j]){

              this.info.status=PROJECT_STATUS[i].value;
            }
          }

        }

      },res => {

      }).catch(err =>{

      });

    },
    mounted(){

      /*
        this.list.push(  {
          date:"2017-10-20",
          subList:[


            {
              task:'进度调整',
              icon:"adjust",
              items:[

              {
                value:'土木工程检查'
              }

              ]
            }


            ,{
              icon:'audit',
              task:'审查',
              items:[{
                value:'施工单位进度计划审核',
                result:false
              },{
                value:'纠偏措施审核',
                result:true
              }]
            },{
              icon:'adjust',
              task:'进度调整',
              items:[{
                value:'土木工程提哦啊正'
              }]
            }]
        });*/

      this.$store.dispatch('getProjectState',{
        'token':this.user.token,
        'pId':this.pId
      }).then(res=>{

        if (res.status==200&&res.statusText=="OK"){

          for (var i=0;i<res.data.length;i++){//for1

            var tempOpt=res.data[i];

            var firstObj={
              date:"",
              subList:[]
            };

            for (var key in tempOpt){//for2

              if (tempOpt.hasOwnProperty(key)){

                if (tempOpt[key][0]!=undefined){
                  firstObj.date=tempOpt[key][0].created_at.split(' ')[0];
                }

                var  secondObj = { task:'', icon:"", items:[] };

                /**
                 * 必须遍历每一个
                 */
                switch(key){
                  case 'make_progress':

                    for(var a=0;a<tempOpt[key].length;a++){

                      var thirdObj={
                        value:tempOpt[key][a].dothing.content
                      };

                      secondObj.items.push(thirdObj);
                    }

                    secondObj.task="制定进度";

                    secondObj.icon='progress';

                    //指定进度
                    break;
                  case 'progress_modification':

                    for(var a=0;a<tempOpt[key].length;a++){

                      var thirdObj={
                        value:tempOpt[key][a].dothing.content
                      };

                      secondObj.items.push(thirdObj);
                    }

                    secondObj.task="进度调整";

                    secondObj.icon='adjust';

                    //进度调整
                    break;
                  case 'progress_review':

                    for(var a=0;a<tempOpt[key].length;a++){

                      var thirdObj={
                        value:tempOpt[key][a].dothing.content
                      };

                      secondObj.items.push(thirdObj);
                    }

                    secondObj.task="进度检查";

                    secondObj.icon='check';

                    //进度检查
                    break;
                  case 'review':

                    for(var a=0;a<tempOpt[key].length;a++){

                      var thirdObj={
                        value:tempOpt[key][a].dothing.content,
                        result:false
                      };

                      if (tempOpt[key][a].status==0){
                        thirdObj.result=true;
                      }

                      secondObj.items.push(thirdObj);
                    }

                    secondObj.task="审查";

                    secondObj.icon='audit';

                    //审查
                    break;
                }

                firstObj.subList.push(secondObj);

              }

            }//for2


            this.list.push(firstObj);

          }//for1

          console.log(JSON.stringify(this.list));

        }

        /*
       var sortedData=this.sortData(res.data);
       var groupResult=this.groupByDate(sortedData);

       var finalResult=this.groupByLogical(groupResult);

       for(var i=0;i<groupResult.length;i++){

         var tempObj={
           date:"",
           subList:[]
         };

         tempObj.date=groupResult[i].created_at.split(' ')[0];

         for(var j=0;j<groupResult[i].length;j++){


           var subObj={
             task:'',
             icon:"adjust",
             items:[{
               value:'土木工程检查'
             }]
           };



         }

         this.list.push(tempObj);

       }*/

          /**
           * {
           * "id":19,
           * "project_id":7,
           * "check_plan_id":null,
           * "progress_plan_id":6,
           * "users_id":6,
           * "task_type":6,
           * "status":0,
           * "created_at":"2017-10-24 08:19:29",
           * "updated_at":"2017-10-24 08:19:29",
           * "dothing":{
           *  "id":6,
           *  "content":"工程部审核进度和检查计划",
           *  "success":"通过",
           *  "fail":"未通过",
           *  "created_at":null,
           *  "updated_at":null}
           *  }
           */



      },res=>{

        debugger;

      }).catch(err =>{

//        this.$message(err);
//
      });
    },
    methods:{
      /**
       * 按照事件类型进行分组
       * @param arr
       * @returns {Array}
       */
      groupResult(arr){

        var newArr = [],
          tempArr = [];

        for (var i = 0, j = arr.length; i < j; i++) {

          var date1 = arr[i].task_type.split(' ')[0];

          var date2 = null;

          if (arr[i + 1] != undefined) {
            date2 =
              arr[i + 1].created_at.split(' ')[0];
          }

          if (date1 == date2) {

            tempArr.push(arr[i]);

          } else {
            tempArr.push(arr[i]);
            newArr.push(tempArr.slice(0));
            tempArr.length = 0;
          }

        }

        return newArr;

      },
      groupByDate(arr){

        var newArr = [],
          tempArr = [];

        for (var i = 0, j = arr.length; i < j; i++) {

          var date1 = arr[i].created_at.split(' ')[0];

          var date2 = null;

          if (arr[i + 1] != undefined) {
            date2 =
              arr[i + 1].created_at.split(' ')[0];
          }

          if (date1 == date2) {

            tempArr.push(arr[i]);

          } else {
            tempArr.push(arr[i]);
            newArr.push(tempArr.slice(0));
            tempArr.length = 0;
          }

        }

        return newArr;
      },
      sortData(data){

        var  temp = 0;

        var target=data;

        for (var i = target.length - 1; i > 0; --i)
        {
          for (var j = 0; j < i; ++j)
          {
            var lDate=new Date(target[j + 1].created_at);

            var rDate=new Date(target[j].created_at);

            if (lDate<rDate)
            {

              temp = target[j];

              target[j] = target[j + 1];

              target[j + 1] = temp;
            }
          }
        }

        return target;
      }
    }
  }
</script>
